<template>
  <div class="home" style="padding: 20px; max-width: 600px; margin: 0 auto;">
    <table style="width: 100%; border-collapse: collapse;">
      <thead style="background-color: #f2f2f2;">
        <tr>
          <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">名字</th>
          <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">年龄</th>
          <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index" style="border-bottom: 1px solid #ddd;">
          <td style="border: 1px solid #ddd; padding: 8px;">{{ item.name }}</td>
          <td style="border: 1px solid #ddd; padding: 8px;">{{ item.age }}</td>
          <td style="border: 1px solid #ddd; padding: 8px;">{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      list: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 25, gender: '男' },
        { name: '赵六', age: 28, gender: '男' },
        { name: '孙七', age: 21, gender: '女' },
        { name: '周八', age: 30, gender: '男' },
        { name: '吴九', age: 23, gender: '女' },
        { name: '郑十', age: 26, gender: '男' },
        { name: '王十一', age: 24, gender: '女' },
        { name: '李十二', age: 27, gender: '男' },
        { name: '张十三', age: 29, gender: '女' },
        { name: '刘十四', age: 22, gender: '男' },
        { name: '陈十五', age: 25, gender: '女' }

      ]
    };
  }
};
</script>
<style></style>